<template>
  <div class="app-container">
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="" prop="">
          <el-input v-model="queryParams.applyName" placeholder="申请人" clearable :style="{width: inputWidth}" />
        </el-form-item>
        <el-form-item label="申请时间：" prop="">
          <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-form-item label="申请状态：" prop="">
            <el-select v-model="queryParams.status" placeholder="请选择" clearable :style="{width: inputWidth}">
              <el-option v-for="dict in statusLs" :key="dict.id" :label="dict.value" :value="dict.id" />
            </el-select>
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <el-table v-loading="loading" :data="tabList" stripe border>
        <el-table-column label="序号" align="center" type="index" width="64px" />
        <el-table-column label="申请人" align="center" prop="applyName" :show-overflow-tooltip="true" />
        <el-table-column label="申请时间" align="center" prop="createTime" width="200" :show-overflow-tooltip="true" />
        <el-table-column label="申请Token类型" align="center" prop="" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <dict-tag :options="assetTypeLs" :value="scope.row.assetType" />
          </template>
        </el-table-column>
        <el-table-column label="申请数量" align="center" prop="applyAmount" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="申请来源" align="center" prop="" width="200">
          <template slot-scope="scope">
            <dict-tag v-if="scope.row.assetType == 1" :options="platformWalletTypeLs" :value="scope.row.platformWalletType" />
            <dict-tag v-if="scope.row.assetType == 2" :options="platformWalletTypeLsNew" :value="scope.row.platformWalletType" />
            <div v-if="scope.row.assetType == 3">商户积分账户</div>
          </template>
        </el-table-column>
        <el-table-column label="计划发放时间" align="center" prop="issueTime" width="200" />
        <el-table-column label="申请理由" align="center" prop="goal" :show-overflow-tooltip="true" />
        <el-table-column label="状态" align="center" prop="time" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <dict-tag :options="statusLs" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="operation(scope.row,1)"
              :disabled="scope.row.status==1?false:true">同意</el-button>
            <el-button size="mini" type="text" @click="operation(scope.row,2)"
              :disabled="scope.row.status==1?false:true">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />

      <!-- 操作弹窗 -->
      <el-dialog :title="title" :visible.sync="dialogVisible" width="500px">
        <p class="content_txt">{{content}}</p>
        <el-form ref="form" :model="form" :rules="rules" v-if="status==2">
          <el-form-item label="" prop="">
            <el-input v-model="form.rejectCause" type="textarea" :autosize="{ minRows: 4, maxRows: 8}"
              placeholder="请填写拒绝原因" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm('form')" :loading="sumitLoading">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
  import {
    assetApplyAuditLs,
    applyAuditAudit,
  } from "@/api/integralOperation";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  export default {
    // dicts: ['equity_card_issue_type', 'equity_card_sell_status'],
    name: "",
    components: {
      ExportExcelButton
    },
    data() {
      return {
        //日期
        date: [],
        labelWidth: '120px',
        inputWidth: '220px',
        dialogVisible: false,
        status: 1, //1 同意，2 拒绝
        title: '',
        content: '',
        sumitLoading: false,
        form: {
          id: '',
          rejectCause: '', //拒绝原因
        },
        // 表单校验
        rules: {
          rejectCause: [{
            required: true,
            message: "请填写拒绝原因",
            trigger: ['change', 'bulr'],
          }],
        },
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 表格数据
        tabList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          applyName: '', //申请人
          endTime: '', //申请结束时间 yyyy-MM-dd
          startTime: '', //申请开始时间 yyyy-MM-dd
          status: '', //发放状态 platform_apply_status
        },
        assetTypeLs: [],
        platformWalletTypeLs: [],
        platformWalletTypeLsNew: [],
        statusLs: [], //状态下拉
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
     
      this.getAssetType();
      this.getDictStatus();
      this.getPlatformWalletType();
      this.getList();
    },
    methods: {
      //获取发放积分类型字典
      getAssetType() {
        var dictType = "platform_apply_asset_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.assetTypeLs = res.result[0].dictList;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //获取申请来源字典
      getPlatformWalletType() {
        var dictType = "platform_coco_wallet_type,platform_tf_wallet_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.platformWalletTypeLs = res.result[0].dictList; 
            this.platformWalletTypeLsNew = res.result[1].dictList; 
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //获取状态字典
      getDictStatus() {
        var dictType = "platform_apply_status";
        this.$getSelectList(dictType)
          .then((res) => {
            this.statusLs = res.result[0].dictList;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        assetApplyAuditLs(this.queryParams).then(response => {
          this.tabList = response.result.records;
          this.total = response.result.total;
          this.loading = false;
        });
      },
      // 表单重置
      reset() {
        this.date = []
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          applyName: '', //申请人
          endTime: '', //申请结束时间 yyyy-MM-dd
          startTime: '', //申请开始时间 yyyy-MM-dd
          status: '', //发放状态 platform_apply_status
        }
        // this.resetForm("form");
        this.handleQuery()
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.startTime = this.date[0];
        this.queryParams.endTime = this.date[1];
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm("queryForm");
        this.reset();
      },
      /** 操作 */
      operation(row, status) {
        this.status = status
        this.form.id = row.id
        if (status == 1) {
          this.title = '同意发放'
          if(row.assetType == 3){
              this.content = '确定同意申请' + row.applyAmount + row.assetTypeDict + '发放'
          }else{
            this.content = '确定同意从' + ' ' + row.platformWalletTypeDict + ' ' + '地址中申请' + ' ' + row.applyAmount + row
            .assetTypeDict + ' 进行发放'
          }

        } else {
          this.title = '拒绝发放'
          if(row.assetType == 3){
              this.content = '确定拒绝申请' + row.applyAmount + row.assetTypeDict + '发放'
          }else{
             this.content = '确定拒绝从' + ' ' + row.platformWalletTypeDict + ' ' + '地址中申请' + ' ' + row.applyAmount + row
            .assetTypeDict + ' 进行发放'
          }

        }
        this.dialogVisible = true
      },
      /** 提交按钮 */
      submitForm() {
        if (this.status == 2 && this.form.rejectCause=='') {
          this.$message.error('请填写拒绝原因');
          return
        }
        this.sumitLoading = true
        let data = {
          audit: this.status, //状态 1 同意 2 拒绝
          id: this.form.id,
          rejectCause: this.form.rejectCause
        }
        applyAuditAudit(data).then(response => {
          this.$message.success('操作成功');
          this.dialogVisible = false
          this.getList()
          this.sumitLoading = false
        }).catch(() => {
          this.sumitLoading = false
        });
      },
    }
  };

</script>
<style scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }

  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
  }

  .listBox_head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
  }

  .content_txt {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 20px;
  }

</style>
